<template>
  <div class="admin-overview">
    <div class="dashboard-header">
      <h2>控制台概览</h2>
      <div class="header-actions">
        <el-input
          v-model="searchQuery"
          placeholder="搜索科室"
          class="search-input"
          size="large"
        >
          <template #append>
            <el-button type="primary" icon="Search">搜索</el-button>
          </template>
        </el-input>
      </div>
    </div>
    
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #409eff;">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">用户总数</div>
              <div class="stat-value">1,248</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #67c23a;">
              <el-icon><OfficeBuilding /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">接入医院</div>
              <div class="stat-value">28</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #e6a23c;">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">病历总数</div>
              <div class="stat-value">12,543</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #f56c6c;">
              <el-icon><Connection /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">区块高度</div>
              <div class="stat-value">3,842</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="department-card">
      <template #header>
        <div class="card-header">
          <h3>科室信息</h3>
          <el-button type="primary" icon="Plus">新增科室</el-button>
        </div>
      </template>
      
      <el-table :data="departments" style="width: 100%" stripe>
        <el-table-column prop="name" label="科室名称" width="150" />
        <el-table-column prop="director" label="科室负责人" width="150" />
        <el-table-column prop="phone" label="联系电话" width="180" />
        <el-table-column prop="address" label="科室地址" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" size="small" icon="Edit" @click="editDepartment(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" icon="Delete" @click="deleteDepartment(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const searchQuery = ref('')
    
    const departments = ref([
      { name: '内科', director: '王主任', phone: '18314463789', address: '1号楼3层' },
      { name: '外科', director: '张主任', phone: '18314463718', address: '1号楼4层' },
      { name: '妇产科', director: '李主任', phone: '18314463725', address: '2号楼2层' },
      { name: '儿科', director: '刘主任', phone: '18314463736', address: '2号楼3 layer' }
    ])
    
    const editDepartment = (dept) => console.log('编辑科室:', dept)
    const deleteDepartment = (dept) => console.log('删除科室:', dept)
    
    return {
      searchQuery,
      departments,
      editDepartment,
      deleteDepartment
    }
  }
}
</script>

<style scoped>
.admin-overview {
  padding: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  margin-bottom: 0;
  border: none;
  border-radius: 8px;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 15px 0;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  margin-right: 15px;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.department-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>